<template>
    <div class="paln-container">
        <div class="paln-num-container">
            <div class="paln-num-label">征收总面积</div>
            <div class="paln-num-wrapper">
                <div v-for="(item,index) in areaSum" :key="'iOdometer-'+index" 
                class="paln-num">
                    <IOdometer v-if="item!='.'"
                    :ref="'totalDomter-'+index"
                    class="iOdometer"
                    :value="item"
                    />
                    <div v-else class="iOdometer">{{item}}</div>
                </div>
            </div>
            <div class="paln-num-brief">
                <div>万</div>
                <div>
                    m<sup style="font-size:16px;">2</sup>
                </div>
            </div>
        </div>
        <div class="project-sum-wrapper">
            <div class="project-sum-item">
                <div>
                    <img src="../assets/icon1.png" alt="" class="icon-image">
                </div>
                <div class="project-sum-content">
                    <div class="project-sum-label">征收总户数</div>
                    <div class="project-sum-value">{{playNum}}户</div>
                </div>
            </div>
            <div class="project-sum-line"></div>
            <div class="project-sum-item">
                <div>
                    <img src="../assets/icon2.png" alt="" class="icon-image">
                </div>
                <div class="project-sum-content">
                    <div class="project-sum-label">项目总数</div>
                    <div class="project-sum-value">{{projectNum}}个</div>
                </div>
            </div>
            <div v-if="imgShow" class="flag-image-wrapper img-move">
                <img src="../assets/flag.png" alt="" class="flag-image">
            </div>
        </div>
    </div>
</template>

<script>
import IOdometer from 'vue-odometer';
import 'odometer/themes/odometer-theme-default.css';
import { getMapPlanArea,getAreaDataTotal } from '@/api/index.js';
export default {
    name: '',
    components:{
      IOdometer
    },
    props:{
        year: {
            type: String
        },
        mode: {
            type: String
        },
        activeArea:{
            type: String
        }
    },
    watch:{
        year(val, oldVal){
            this.getTableData();
        },
        activeArea(val, oldVal){
            this.getTableData();
        },
    },
    data() {
        return {
            areaSum:[0,0,0,0,0,0],
            playNum:0,
            projectNum:0,
            imgShow:false
        }
    },
    mounted(){
        var _this=this;
        this.$nextTick(function(){
            this.getTableData();
            setInterval(function(){
                _this.getTableData();
            },300000);
            this.imgShow=true;
            setInterval(function(){
                _this.imgShow=false;
                setTimeout(function(){
                    _this.imgShow=true;
                },200);
            },4000);
        });
    },
    methods: {
        getTableData(){
            var _this=this;
            var mode=this.mode;
            switch(mode){
                case "city":
                    getMapPlanArea({
                        year:this.year
                    }).then(res => {
                        if(res.code==200){
                            var data=res.data;
                            _this.resetData(data);
                        }
                        return;
                    }).catch(err => {
                        console.log(err);
                    });
                    break;
                case "area":
                    getAreaDataTotal({
                        id:this.activeArea,
                        year:this.year
                    }).then(res => {
                        if(res.code==200){
                            var data=res.data;
                            _this.resetData(data);
                        }
                        return;
                    }).catch(err => {
                        console.log(err);
                    });
                    break;
            }
        },
        resetData(data){
            this.playNum=data.planNum;
            this.projectNum=data.projectNum;
            var areaNum=data.areaSum;
            var modeVal=this.mode;
            switch(modeVal){
                case "city":
                    areaNum=areaNum.toFixed(0)+'';
                    break;
                case "area":
                    areaNum=areaNum.toFixed(2)+'';
                    break;
            }
            var arr=[];
            for(var i=0;i<areaNum.length;i++){
                var item=areaNum[i];
                if(item!='.'){
                    arr.push(Number(item));
                }else{
                    arr.push(item);
                }
                if(i==areaNum.length-1){
                    this.justifyData(arr);
                }
            }
        },
        justifyData(arr){
            var len=arr.length;
            if(len<6){
                for(var i=0;i<6-len;i++){
                    arr.unshift(0);
                    if(i==5-len){
                        this.areaSum=arr;
                        this.iOdometerInit(arr);
                    }
                }
            }else{
                this.areaSum=arr;
                this.iOdometerInit(arr);
            }
        },
        iOdometerInit(numArr){
            for(var i=0;i<numArr.length;i++){
                var item=numArr[i];
                if(item!='.'){
                    var target='totalDomter-'+i;
                    this.$refs[target][0].update(0);
                    this.$refs[target][0].update(item);
                }
            }
        }
    }
}
</script>

<style scoped>
.paln-container{
    width:100%;
    height:100%;
}
.paln-num-container{
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
}
.paln-num-label{
    font-size: 22px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #447DDF;
    line-height: 71px;
    letter-spacing: 3px;
    margin-right:17px;
    white-space: nowrap;
}
.paln-num-wrapper{
    display:flex;
}
.paln-num{
    width: 54px;
    height: 71px;
    background: linear-gradient(180deg, #07133C 0%, #102657 44%, #1B3D79 100%);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right:17px;
    border: linear-gradient(180deg, #08153F 0%, #1D74DD 100%);
}
.iOdometer{
    font-family: 'lcd';
    color:#FFE76F;
    font-size:45px;
}
.paln-num-brief{
    font-size: 22px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #447DDF;
    display: flex;
    justify-content: center;
    align-items: center;
}
.project-sum-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    width:100%;
    height:83px;
    background: linear-gradient(90deg, #081135 0%, #194691 49%, #081135 100%);
    margin-top:5px;
    position:relative;
    overflow:hidden;
}
.flag-image-wrapper{
    width:381px;
    height:15px;
    position:absolute;
    bottom:-8px;
    left:-381px;
}
.flag-image{
    width:381px;
    height:15px;
}
@keyframes theanimation{ 
  from {left:-381px} 
  to {left:100%;}
}
.img-move{
    animation:theanimation 5s ease alternate; 
    -webkit-animation:theanimation 5s ease alternate ; 
    -moz-animation:theanimation 5s ease alternate ; 
    -o-animation:theanimation 5s ease alternate ; 
    -ms-animation:theanimation 5s ease alternate ; 
}
.project-sum-item{
    display: flex;
    align-items: center;
}
.icon-image{
    width:45px;
    height:46px;
}
.project-sum-content{
    margin-left:18px;
}
.project-sum-label{
    font-size: 19px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #FFFFFF;
    letter-spacing: 2px;
}
.project-sum-value{
    font-size: 23px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #FFFFFF;
    margin-top:3px;
}
.project-sum-line{
    width: 2px;
    height: 40px;
    background: linear-gradient(180deg, #19458F 0%, #4D7ED3 50%, #18448D 100%);
    margin-left:48px;
    margin-right:48px;
}
</style>


